<template>
  <a-modal class="limit-modal" @cancel="close" width="85vw" title="保养详情" :visible="visible">
    <a-spin :loading="loading" tip="加载中..." class="w-full">
      <car-info-block :carInfo="carInfo" :fieldList="fieldList" />
      <a-divider />
      <card class="add-info-card" title="保养信息">
        <div class="section-item gray">
          <div class="section-item-content">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <a-descriptions-item label="保养单关联门店">{{ carInfo.siteName }}</a-descriptions-item>
              <a-descriptions-item label="修理厂" :span="2">{{ carInfo.maintenanceShop }}</a-descriptions-item>
              <a-descriptions-item label="本次保养里程">{{ unitVal(carInfo.entranceKilometre, '公里') }}</a-descriptions-item>
              <a-descriptions-item label="下次保养里程">{{ unitVal(carInfo.estimatedKilometre, '公里') }}</a-descriptions-item>
              <a-descriptions-item label="本次保养日期">{{ carInfo.entranceDate }}</a-descriptions-item>
              <a-descriptions-item label="下次保养日期">{{ carInfo.estimatedTime }}</a-descriptions-item>
              <a-descriptions-item label="关联订单号">
                <a-link v-if="carInfo.orderNo" type="link" @click="() => onLink(carInfo)">{{ carInfo.orderNo }}</a-link>
                <div v-if="carInfo.giveStaffName">(交车人：{{ carInfo.giveStaffName }})</div>
              </a-descriptions-item>
              <a-descriptions-item label="承租人信息">
                <div>
                  <template v-if="carInfo.memberName && carInfo.memberPhone"> {{ carInfo.memberName }} {{ carInfo.memberPhone }} </template>
                  <template v-else>-</template>
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="负责人">{{ carInfo.undertaker }}</a-descriptions-item>
              <a-descriptions-item label="备注" :span="3">{{ carInfo.remark }}</a-descriptions-item>
              <a-descriptions-item label="照片" :span="3">
                <upload-img v-model="carInfo.fileIdList" disabled />
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </card>
      <card class="add-info-card" title="保养费用" :showDivider="assetFeeInfo" style="margin-bottom: -30px">
        <div class="section-item gray">
          <div class="section-item-content">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <a-descriptions-item label="保养费"><UnitValue :value="carInfo.maintenanceAmount" unit="元" /></a-descriptions-item>
              <a-descriptions-item label="费用备注" :span="2">{{ carInfo.feeRemark }}</a-descriptions-item>
              <!-- 对齐 -->
              <a-descriptions-item label="">&nbsp;</a-descriptions-item>
              <a-descriptions-item label="">&nbsp;</a-descriptions-item>
              <a-descriptions-item label="">&nbsp;</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </card>
      <card class="add-info-card" title="结算费用" :showDivider="false" v-if="assetFeeInfo?.feeStatus == 1">
        <div class="section-item gray">
          <div class="section-item-content">
            <a-descriptions :size="size" :align="{ label: 'right' }">
              <a-descriptions-item label="结算时间">{{ assetFeeInfo.confirmTime }}</a-descriptions-item>
              <a-descriptions-item label="结算方式">{{ assetFeeInfo.payTypeName }}</a-descriptions-item>
              <a-descriptions-item label="结算账号">{{ assetFeeInfo.payAccountName }}</a-descriptions-item>
              <a-descriptions-item label="供应商名称">{{ assetFeeInfo.customerName }}</a-descriptions-item>
              <a-descriptions-item label="供应商收款账号">{{ assetFeeInfo.customerAccount }}</a-descriptions-item>
              <a-descriptions-item label="结算备注">{{ assetFeeInfo.settlementRemark }}</a-descriptions-item>
              <a-descriptions-item label="结算凭证"><upload-img v-model="assetFeeInfo.fileIdList" disabled /></a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </card>
    </a-spin>
    <template #footer>
      <a-button @click="close" :loading="loading">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  import { maintenanceDetail } from '@/api/asset/maintenance'
  import { unitVal } from '@/utils'
  import useNavigate from '@/hooks/useNavigate'
  
  const { navigateTo } = useNavigate()
  const size = ref('medium')
  const loading = ref(false)
  const carInfo = ref({})
  const onLink = (record) => {
    if (record.orderType == 2) {
      navigateTo(`/short-order/detail/${record.orderId}`, `${record.orderNo}-短租详情`)
    } else if (record.orderType == 3) {
      navigateTo(`/long-order/detail/${record.orderId}`, `${record.orderNo}-长租详情`)
    }
  }

  const visible = ref(false)
  const open = (record) => {
    visible.value = true
    getDetail(record.id)
  }
  const close = () => {
    visible.value = false
    carInfo.value = {}
    assetFeeInfo.value = null
  }

  const fieldList = ref([
    { label: '车架号', prop: 'vin' },
    { label: '车辆当前归属门店', prop: 'carSiteName' },
    { label: '归属车场', prop: 'libraryName' },
    { label: '保养单号', prop: 'maintenanceNo' },
  ])

   // 结算信息
  const assetFeeInfo = ref(null)
  const getDetail = (id) => {
    loading.value = true
    maintenanceDetail({ id: id }).then((res) => {
      loading.value = false
      carInfo.value = res.result
      assetFeeInfo.value = res.result.assetFeeInfo
    })
  }

  defineExpose({
    open,
  })
</script>
